import {useEffect} from "react";
import { Route, Switch, BrowserRouter as Router, useLocation} from "react-router-dom";
import { inject } from "mobx-react";
import {routes, mainRoutes} from "@config/router";
import Menu from "@components/Menu";
import Loading from "@components/Loading";
import Header from "@components/Header";
import Dialog from "@components/Dialog";
// 主页面路由组件
const MainRoute = inject(({store}) => ({
    loading: store.status.loading,
    dialog: store.status.dialog,
    isEnterMain: store.status.isEnterMain,
    setEnterMainType: store.status.setEnterMainType,
    setDialog: store.status.setDialog,
    closeDialog: store.status.closeDialog,
    closeLoading: store.status.closeLoading
}))(props => {
    const {loading, isEnterMain, dialog, setEnterMainType, closeDialog, closeLoading} = props;
    const location = useLocation();
    useEffect(() => {
        setEnterMainType(true);
    }, []);
    useEffect(() => {
        // 切换路由时重置状态
        closeDialog();
        closeLoading();
        return () => {
            closeDialog();
            closeLoading();
        };
    }, [location]);
    return isEnterMain?<>
        <section className="layout">
            <Menu />
            <div className="layout_context">
                <Header />
                <main className="main">
                    {mainRoutes.map((item, index) => 
                        <Route key={ index } exact={ true } path={ item.path } component={ item.component }/>
                    )}
                </main>
            </div>
        </section>
        <Loading { ...loading }/>
        <Dialog { ...dialog }/>
    </>: null;
});
function App(props) {
    return (
        <Router>
            <Switch>
                {routes.map((item, index) => 
                    <Route key={ index } exact={ true } path={ item.path } component={ item.component }/>
                )}
                <Route><MainRoute /></Route>
            </Switch>
        </Router>
    );
}
export default App;